import React, {useState, useEffect} from 'react';
import router from '../../config/router';
import { Link, Outlet, history, useLocation } from 'umi';
import { connect } from 'dva';
import { Button, Menu } from 'antd'
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import styles from './index.less';

const newRoute = router.filter(item => item.layout != false)


const Layout = (props) => {
  const location =  useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [keys, setKeys] = useState([location.pathname])
  useEffect(()=>{
  }, [])

  const getItem = (label, key, icon, children = [], type) => {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }

  const renderItem = (arr) => {
    let newList = arr.map(item => {
      let children = []
      if(item.routes && item.routes.length > 0) {
        children = renderItem(item.routes)
      } else {
        children = null
      }
      return getItem(item.title, item.path || '/', <PieChartOutlined />,children)
    })
    return newList
  }
  const items = renderItem(newRoute)
  
  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  const onSelect = (meumItem) => {
    setKeys([meumItem.key])
    history.push(meumItem.key)
  }

  return (
    
    <div className={styles.navs}>
      <div style={{width: 255, height: '100%'}}>
        <Button type="primary" onClick={toggleCollapsed} style={{ position: 'fixed', left: '10px', bottom: '27px' }}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
        <Menu
          selectedKeys={keys}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
          items={items}
          onClick={onSelect}
        />
      </div>
      <div style={{flex: 1, marginLeft: '10px'}}>
      登录名：{props.userInfo.name || 'ling'}
        <Outlet />
      </div>
      
      {/* <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li>
          <a href="https://github.com/umijs/umi">Github</a>
        </li>
      </ul> */}
     
    </div>
  );
}

export default connect(({common})=>({
  userInfo: common.userInfo,
}))(Layout)
